<template>
    <div class="KindView">
        <div class="kindHeader">
            <van-nav-bar title="标题" left-text="返回" left-arrow :placeholder="true" :fixed="true">
                <template #left>
                    <van-icon name="arrow-left" size="20" @click="$router.go(-1)" color="black" />
                </template>
                <template #title>
                  <div @click="onFocus">
                    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" :disabled="true" >
                        <template #left-icon>
                            <van-icon name="search" color="black" size="20" />
                        </template>
                    </van-search>
                  </div>
                </template>
                <template #right>
                    <van-popover v-model="showPopover" trigger="click" :actions="actions" placement="bottom-end" theme="dark" @select="onSelect">
                        <template #reference>
                            <van-icon name="ellipsis" size="24" color="black" />
                        </template>
                    </van-popover>
                </template>
            </van-nav-bar>
            <!-- 分享模块 -->
                <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                />
        </div>
        <div class="kindMain">
          <div class="mainLeft">
            <van-sidebar v-model="activeKey" @change="onChange">
              <van-sidebar-item v-for="item, index in items" :key="index" :title="item" />
            </van-sidebar>
          </div>
          <div class="mainRight">
            <van-grid square :border="false" :column-num="3">
              <van-grid-item v-for="value in proList" :key="value.proid" :icon="value.img1" :text="value.category" @click="seach(value.category)" />
            </van-grid>
          </div>
        </div>
    </div>
</template>
<style lang="stylus">
.KindView
  .van-nav-bar__content
    height 2.75rem
  .van-search .van-cell
    padding .1875rem
  .van-search
    padding 0
  .van-nav-bar__title
    max-width 70%
    flex 1
  .van-icon__image
    width 4rem
    height 4rem
  .van-sidebar-item
      padding .9375rem .625rem
      text-align center
</style>
<style lang="stylus" scoped>
.kindHeader
    height 2.75rem
.kindMain
    flex 1
    overflow auto
    display flex
    .mainLeft
        overflow auto
    .mainRight
        flex: 1
        overflow auto
.KindView
    flex 1
    display flex
    height: 100%
    flex-direction column
    .van-nav-bar__title
        max-width: 80%;
        .van-search
            font-size .75rem
            background-color rgba(0,0,0,0)
</style>
<script>
import Vue from 'vue'
import { NavBar, Search, Icon, Popover, ShareSheet, Sidebar, SidebarItem, Grid, GridItem } from 'vant'
import { getCateGoryList, getProlist } from '@/api/Kind.js'
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Icon)
Vue.use(Popover)
Vue.use(ShareSheet)
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Grid)
Vue.use(GridItem)
export default {
  data () {
    return {
      activeIndex: 0,
      items: [],
      showPopover: false,
      actions: [{ text: '首页', icon: 'home-o', index: 0 }, { text: '分类搜素', icon: 'apps-o', index: 1 }, { text: '我的嗨购', icon: 'user-o', index: 2 }, { text: '浏览记录', icon: 'clock-o', index: 3 }, { text: '我的关注', icon: 'like-o', index: 4 }, { text: '分享', icon: 'guide-o', index: 5 }],
      value: '',
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      activeKey: 0,
      proList: []
    }
  },
  methods: {
    // 分享按钮
    onSelect (action) {
      switch (action.index) {
        case 0:
          this.$router.push('/home')
          break
        case 1:
          this.$router.push('/kind')
          break
        case 2:
          this.$router.push('/user')
          break
        case 3:
          console.log('我是浏览记录模块')
          break
        case 4:
          console.log('我是关注模块')
          break
        case 5:
          console.log('我是分享模块')
          this.showShare = true
          break
      }
    },
    // 切换监听事件
    onChange (index) {
      getProlist({ count: index + 1 }).then((res) => {
        this.proList = res.data
      })
    },
    onFocus () {
      this.$router.push('/seach')
    },
    seach (value) {
      this.$router.push({ name: 'seach', params: { searcName: value } })
    }
  },
  mounted () {
    getCateGoryList().then((res) => {
      this.items = res.data
    })
    getProlist().then((res) => {
      this.proList = res.data
    })
  }
}
</script>
